<div
  class="shark-wrap"
  style="
    -webkit-mask: url(https://raw.githubusercontent.com/XboxYan/tuchuang/main/img/3af9e8de.00uqxe.png)
      0 0/100%;
  "
>
  <img
    class="logo"
    src="https://raw.githubusercontent.com/XboxYan/tuchuang/main/img/3af9e8de.00uqxe.png"
  />
</div>
<div
  class="shark-wrap"
  style="
    -webkit-mask: url(https://raw.githubusercontent.com/XboxYan/tuchuang/main/img/e55106cd.pg76bp.png)
      0 0/100%;
  "
>
  <img
    class="logo"
    style="width: 300px"
    src="https://raw.githubusercontent.com/XboxYan/tuchuang/main/img/e55106cd.pg76bp.png"
  />
</div>

<style>
  html,body{
    font-family: -apple-system, "BlinkMacSystemFont", sans-serif;
    margin: 0;
    height: 100%;
    display: flex;
    justify-content: safe center;
    flex-direction: column;
    align-items: center;
    background: #000;
    gap: 20px;
    padding: 50px;
  }
  .shark-wrap {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  .shark-wrap::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0) 60%
    );
    animation: shark-wrap 2s infinite;
    transform: translateX(-100%);
  }
  @keyframes shark-wrap {
    to {
      transform: translateX(100%);
    }
  }

  .logo {
    display: block;
    width: 150px;
  }
</style>
